<template>
<div>
<div class="con_header">
  <van-row >
    <van-col span="8" ><span class="btn_header">全选</span></van-col>
    <van-col span="8" ><span class="sp_header">购物车</span></van-col>
    <van-col span="8" ><van-icon class="ico_header" size="17" name="search" /></van-col>
  </van-row>
</div>

  <div class="con_con">
  <van-checkbox-group v-model="checkedGroup" ref="checkboxGroup">
    <van-card
      :price="item.price"
      :desc="item.desc"
      v-for="(item,index) in shopcard" :key="index"
    >
      <template slot="title">  <!-- 自定义标题部分，主要是为了添加删除商品按钮 -->
        <span>{{item.title}}</span><span>&nbsp;&nbsp;&nbsp;</span>
        <span style="float:right;"><van-icon name="delete" /></span>
      </template>
      <template slot="thumb">  <!-- 自定义左侧部分，为了添加左侧checkbox -->
        <van-checkbox :name="item.title" checked-color="#b90505" icon-size="12px"></van-checkbox>
        <van-image :src="item.thumb"></van-image>
      </template>
      <template slot="bottom">  <!-- 自定义底部，为了实现商品数量功能 -->
        <div class="num">
<!--          <van-button size="small"  :disabled="item.num <=1">-</van-button> &lt;!&ndash; 数量小于1时禁用按钮 &ndash;&gt;-->
<!--          {{item.num}}-->
<!--          <van-button size="small" >+</van-button>-->
          <van-stepper v-model="item.num" min="1" max="8" />
        </div>
      </template>
    </van-card>
  </van-checkbox-group>
  </div>

  <div class="count">
    <van-row style="margin-top:0.2rem;text-align:center">
      <van-col span="6">  <!-- 全选CheckBox部分 -->
        <van-checkbox  checked-color="#b90505" icon-size="12px">全选</van-checkbox>
      </van-col>
      <van-col span="12" style="font-size:14px">  <!-- 总价格部分 -->
        总计：<span style="margin-top:10px;font-size:16px;font-weight:700">{{'￥'+allcount}}</span>
      </van-col>
      <van-col span="6">  <!-- 结算按钮 -->
        <van-button size="small" round color="#b90505">结算</van-button>
      </van-col>
    </van-row>
  </div>
</div>
</template>

<script>
export default {
  name: "shopCat",
  data(){
    return{
      checkedGroup:[],
      allcount:0,
      shopcard:[
        { price: "15",  title: '水果', desc: '木瓜又名木瓜海棠,叶椭圆,花粉红,果深黄色,具光泽,味微酸涩,有芳香。可入药,又可食用。家乡的土地上,能生长出这样的佳木,也实在是一件令人骄傲的事儿。',
          thumb:require('@/img/2.jpg'),num:'1' },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 },
        { price: "89", title:'帽子',desc: '这种帽子也称为西部帽子、牛仔帽。其大小据说可以装水大约10加仑。冬天以皮革和毡制品为材质；夏天以布匹质地的物品和草为材质。最近的主流是在帽檐下附上了类似于电线的帽带。',
          thumb:require('@/img/1.jpg'),num:1 }
      ]
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.con_header {
  /*width: 20rem;*/
  position: fixed;
  width: 100%;
  z-index: 1;
  height: 1.2rem;
  background-color: #ededed;

}
.btn_header {
  display: block;
  font: normal bold 0.3rem Times, Sans-serif;
  color: coral;
  margin: 14px 0 0 14px;
}

.sp_header {
  display: block;
  font: normal bold 0.5rem arial, sans-serif;
  color: black;
  margin: 5px 0 0 35px;

}

.ico_header {
  display: block;
  margin: 15px 0 0 80px;
}
.count{
  height: 6rem;
  position: fixed;
  width: 100%;
  top:15rem;
  background-color: beige;
}
.con_con{
  position: fixed;
  top: 1.1rem;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
</style>
